<p>需要 <a target="_blank" href=
"http://v3.bootcss.com/javascript/#transitions">transition.js</a> 支持。</p>
<p><code>.collapse</code> 隐藏条目, <code>.collapse.in</code> 显示条目。</p>
<p>调用方式一：仅仅通过向页面元素添加 <code>data-toggle=&quot;collapse&quot;</code> 和
<code>data-target</code> 就可以为其赋予控制可折叠页面元素的能力。 <code>data-target</code>
属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加 <code>.collapse</code> 。
如果你希望可折叠页面元素的默认状态是展开的，请添加 <code>.in</code> 。 为了给一组可折叠页面元素添加控制器，添加
<code>data-parent=&quot;#selector&quot;</code> 即可</p>
<p>调用方式二：手动触发 <code>$(&quot;.collapse&quot;).collapse()</code></p>
<h3>类型</h3>
<h4>结合面板</h4>
<div class="example panel-group" contenteditable="true" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent=
      "#accordion" href="#collapseOne">Item 1</a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse fade panel-body">
      The content of Item1. <code>.panel-collapse .collapse .fade</code>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent=
      "#accordion" href="#collapseTwo">Item 2</a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in panel-body">
      <p>The content of Item2. <code>.panel-collapse .collapse .in</code>
      默认显示。</p>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent=
      "#accordion" href="#collapseThree">Item 3</a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse panel-body">
      The content of item3. <code>.panel-collapse .collapse</code>
    </div>
  </div>
</div>
<h4>结合按钮</h4>
<div class="example" contenteditable="true">
  <button type="button" class="btn btn-info" data-toggle="collapse"
  data-target="#collapseButton">hulala</button>
  <div id="collapseButton" class="collapse in">
    Ho la la hu la la, hu la hu la.
  </div>
</div>
<h3>变化</h3>
<h4>方法和事件</h4>
<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th style="width: 80px;">方法</th>
      <th>例子</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>.collapse(options)</td>
      <td><code>$(&#39;#myCollapse&#39;).collapse({ toggle: false
      })</code></td>
      <td>赋予页面元素可折叠功能。接受一个可选的object作为参数。</td>
    </tr>
    <tr>
      <td>.collapse(&#39;toggle&#39;)</td>
      <td><code>$(&#39;#myCollapse&#39;).collapse(&#39;toggle&#39;)</code></td>
      <td>展示或隐藏一个可折叠的页面元素。</td>
    </tr>
    <tr>
      <td>.collapse(&#39;show&#39;)</td>
      <td><code>$(&#39;#myCollapse&#39;).collapse(&#39;show&#39;)</code></td>
      <td>展示一个可折叠页面元素。</td>
    </tr>
    <tr>
      <td>.collapse(&#39;hide&#39;)</td>
      <td><code>$(&#39;#myCollapse&#39;).collapse(&#39;hide&#39;)</code></td>
      <td>隐藏一个可折叠页面元素。</td>
    </tr>
  </tbody>
</table>
<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th style="width: 80px;">事件</th>
      <th>使用</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>show.bs.collapse</td>
      <td><code>$(&#39;#myCollapse&#39;).on(&#39;show.bs.collapse&#39;,
      function () { // do something… })</code></td>
      <td>当 <code>show</code> 方法被调用时，此事件将被立即触发。</td>
    </tr>
    <tr>
      <td>shown.bs.collapse</td>
      <td><code>$(&#39;#myCollapse&#39;).on(&#39;shown.bs.collapse&#39;,
      function () { // do something… })</code></td>
      <td>当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
    </tr>
    <tr>
      <td>hide.bs.collapse</td>
      <td><code>$(&#39;#myCollapse&#39;).on(&#39;hide.bs.collapse&#39;,
      function () { // do something… })</code></td>
      <td>当 <code>hide</code> 方法被调用时，此事件将被立即触发。</td>
    </tr>
    <tr>
      <td>hidden.bs.collapse</td>
      <td><code>$(&#39;#myCollapse&#39;).on(&#39;hidden.bs.collapse&#39;,
      function () { // do something… })</code></td>
      <td>当可折叠页面元素隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
    </tr>
  </tbody>
</table>
